<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI专利管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
        }
        .card-hover:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
        }
        .process-item.active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
        }
        .process-item.completed {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        /* 选中状态样式 */
        .case-item.selected {
            background: linear-gradient(to right, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.04)) !important;
            border-left: 3px solid #3b82f6;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
        }

        .case-item.selected h4 {
            color: #1e40af !important;
            font-weight: 500;
        }

        .case-item.selected p {
            color: #3b82f6 !important;
        }

        .case-item.selected .w-6.h-6 {
            background: #3b82f6 !important;
        }

        .case-item.selected .w-6.h-6 svg {
            color: white !important;
        }

        /* 进度指示器在选中状态下的样式 */
        .case-item.selected .w-10.h-10 {
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航 -->
    <nav class="bg-white/90 backdrop-blur-md border-b border-gray-200 shadow-sm">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-xl font-medium text-gray-900">AI专利工作台</h1>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="ri-notification-line text-xl"></i>
                    </button>
                    <div class="flex items-center space-x-3">
                        <span class="text-sm text-gray-600">陈质检师</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-4">
        <!-- 案件管理区域 -->
        <div class="bg-white rounded-2xl shadow-md border border-gray-200">
            <!-- 案件管理头部 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-3">
                        <div class="w-1 h-6 bg-blue-500 rounded-full"></div>
                        <h3 class="text-lg font-medium text-gray-900">我的案件</h3>
                    </div>
                    <div class="relative" style="width: 300px;">
                        <input type="text" placeholder="搜索案件编号或名称..." class="w-full border border-gray-300 bg-white rounded-xl px-4 py-2.5 pl-10 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <!-- <div class="mt-4 flex space-x-4">
                    <div class="relative">
                        <select class="appearance-none border border-gray-300 bg-white rounded-xl px-4 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                            <option>全部状态</option>
                            <option>交底书撰写中</option>
                            <option>交底书查新中</option>
                            <option>申请书撰写中</option>
                            <option>专利预评估中</option>
                            <option>已完成</option>
                        </select>
                        <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="relative flex-1">
                        <input type="text" placeholder="搜索案件编号或名称..." class="w-full border border-gray-300 bg-white rounded-xl px-4 py-2.5 pl-10 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div> -->
            </div>

            <!-- 案件列表和详情区域 -->
            <div class="flex flex-col lg:flex-row">
                <!-- 左侧：案件列表 -->
                <div class="w-full lg:w-1/3">
                    <div class="bg-white border border-gray-200 overflow-hidden h-full min-h-[400px] flex flex-col">
                        <!-- 案件列表 -->
                        <div class="divide-y divide-gray-100 flex-1 overflow-y-auto">
                            <!-- 案件项目 4 -->
                            <div class="px-6 py-5 hover:bg-gray-50/70 cursor-pointer transition-all duration-200 group case-item" onclick="selectCase('case4')">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <h4 class="text-base font-medium text-gray-900 group-hover:text-gray-700 transition-colors">物联网智能传感器网络 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 ml-2">new</span></h4>
                                        <p class="text-sm text-gray-500 mt-1">PAT-2024-004</p>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <div class="w-10 h-10 rounded-xl bg-green-50 border border-green-200 flex items-center justify-center">
                                            <span class="text-sm font-medium text-green-600">3/4</span>
                                        </div>
                                        <div class="w-6 h-6 rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center group-hover:bg-blue-50 transition-colors">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 案件项目 5 -->
                            <div class="px-6 py-5 hover:bg-gray-50/70 cursor-pointer transition-all duration-200 group case-item" onclick="selectCase('case5')">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <h4 class="text-base font-medium text-gray-900 group-hover:text-gray-700 transition-colors">智能语音识别系统</h4>
                                        <p class="text-sm text-gray-500 mt-1">PAT-2024-001</p>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <div class="w-10 h-10 rounded-xl bg-green-100 border border-green-300 flex items-center justify-center">
                                            <span class="text-sm font-medium text-green-700">4/4</span>
                                        </div>
                                        <div class="w-6 h-6 rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center group-hover:bg-blue-50 transition-colors">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：案件详情 -->
                <div class="w-full lg:w-2/3">
                    <div class="bg-white border border-gray-200 h-full min-h-[400px] flex flex-col" id="caseDetail">
                        <div class="px-8 py-6 border-b border-gray-200">
                            <h3 class="text-xl font-medium text-gray-900">案件详情</h3>
                        </div>
                        <div class="p-8 flex-1 flex items-center justify-center">
                            <!-- 默认状态 -->
                            <div class="text-center text-gray-500">
                                <div class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gray-100 border border-gray-200 flex items-center justify-center">
                                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                </div>
                                <p class="text-lg">请选择一个案件查看详情</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页码选择 -->
            <div class="bg-white rounded-2xl shadow-md border border-gray-200 px-6 py-4 w-full">
                <div class="flex items-center justify-between w-full">
                    <nav class="flex items-center space-x-2">
                        <button class="w-10 h-10 rounded-xl border border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center" id="prevBtn">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        
                        <div class="flex items-center space-x-2" id="pageNumbers">
                            <button class="w-10 h-10 rounded-xl bg-blue-600 border border-blue-600 text-white font-medium text-sm hover:bg-blue-700 transition-colors">1</button>
                            <button class="w-10 h-10 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-100 font-medium text-sm transition-colors">2</button>
                            <button class="w-10 h-10 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-100 font-medium text-sm transition-colors">3</button>
                        </div>
                        
                        <button class="w-10 h-10 rounded-xl border border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center" id="nextBtn">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </nav>
                    
                    <div class="flex items-center text-sm text-gray-500">
                        <span>共 <span id="totalCases">18</span> 个案件</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 案件数据
        const casesData = {
            case1: {
                name: '机器学习优化算法',
                number: 'PAT-2024-003',
                status: '交底书撰写中',
                createTime: '2024-01-25',
                description: '面向大规模数据的机器学习算法优化方法',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'pending', file: './jiaodishu/chaxin.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case2: {
                name: '区块链数据存储方法',
                number: 'PAT-2024-002',
                status: '交底书查新中',
                createTime: '2024-01-20',
                description: '基于区块链技术的分布式数据存储和验证方法',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'in-progress', file: './jiaodishu/chaxin.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case3: {
                name: '生物医学图像识别算法',
                number: 'PAT-2024-006',
                status: '查新已完成',
                createTime: '2024-02-10',
                description: '基于深度学习的医学影像智能诊断系统，支持多种疾病的自动识别和分析',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/chaxin_report.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            },
            case4: {
                name: '物联网智能传感器网络',
                number: 'PAT-2024-004',
                status: '专利评估中',
                createTime: '2024-02-01',
                description: '基于物联网技术的智能传感器网络系统，实现设备间的自主协调和数据融合',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/chaxin_report.html' },
                    application: { status: 'completed', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'in-progress', file: './zhijian/evaluate.html' }
                }
            },
            case5: {
                name: '智能语音识别系统',
                number: 'PAT-2024-001',
                status: '评估已完成',
                createTime: '2024-01-15',
                description: '基于深度学习的智能语音识别系统，支持多语言实时转换',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'completed', file: './jiaodishu/chaxin_report.html' },
                    application: { status: 'completed', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'completed', file: './zhijian/evaluate.html' }
                }
            },
            case6: {
                name: '量子加密通信协议',
                number: 'PAT-2024-005',
                status: '交底书撰写中',
                createTime: '2024-02-05',
                description: '基于量子密钥分发的安全通信协议，提供理论上不可破解的加密方案',
                progress: {
                    disclosure: { status: 'completed', file: './jiaodishu/editor2.html' },
                    novelty: { status: 'pending', file: './jiaodishu/compare1.html' },
                    application: { status: 'pending', file: './shenqingshu/editor.html' },
                    evaluation: { status: 'pending', file: './zhijian/evaluate.html' }
                }
            }
        };

        function selectCase(caseId) {
            // 移除所有选中状态
            document.querySelectorAll('.case-item').forEach(item => {
                item.classList.remove('selected');
            });
            
            // 添加选中状态到当前项
            const selectedItem = document.querySelector(`[data-case="${caseId}"], [onclick*="${caseId}"]`);
            if (selectedItem) {
                selectedItem.classList.add('selected');
            }

            const caseData = casesData[caseId];
            if (!caseData) return;

            // 动态计算流程状态 - 当前一个任务完成后，下一个任务自动开始
            function getProcessStatus(progress) {
                const stages = ['disclosure', 'novelty', 'application', 'evaluation'];
                let processedProgress = { ...progress };
                
                for (let i = 0; i < stages.length; i++) {
                    const currentStage = stages[i];
                    const nextStage = stages[i + 1];
                    
                    // 如果当前阶段已完成且下一阶段是pending，则将下一阶段设为in-progress
                    if (processedProgress[currentStage].status === 'completed' && 
                        nextStage && 
                        processedProgress[nextStage].status === 'pending') {
                        processedProgress[nextStage] = {
                            ...processedProgress[nextStage],
                            status: 'in-progress'
                        };
                        break; // 只激活下一个阶段，不继续往后
                    }
                }
                
                return processedProgress;
            }
            
            const dynamicProgress = getProcessStatus(caseData.progress);

            const detailHtml = `
                <div class="px-8 py-4 border-b border-gray-100">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <div class="flex items-center gap-3">
                                <h3 class="text-xl font-medium text-gray-900">${caseData.name}</h3>
                                <button class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-lg transition-all duration-200 group" title="编辑案件信息">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                </button>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">${caseData.number}</p>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium ${
                                caseData.status === '进行中' ? 'bg-blue-50 text-blue-700 border border-blue-200' :
                                caseData.status === '已完成' ? 'bg-green-50 text-green-700 border border-green-200' :
                                caseData.status === '待处理' ? 'bg-yellow-50 text-yellow-700 border border-yellow-200' :
                                'bg-gray-50 text-gray-700 border border-gray-200'
                            }">
                                ${caseData.status}
                            </span>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">
                        <span>创建时间：${caseData.createTime}</span>
                    </div>
                    <div class="text-sm text-gray-500">
                        <span>创建人：40374533@test.com</span>
                    </div>    
                </div>
                <div class="px-8 py-4">
                    <div class="mb-8">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="w-1 h-6 bg-blue-500 rounded-full"></div>
                            <h4 class="text-lg font-medium text-gray-900">处理流程</h4>
                        </div>
                        <!-- 流程图布局 -->
                        <div class="relative">
                            <!-- 连接线 -->
                            <div class="absolute top-10 left-10 right-10 h-0.5 bg-gray-200 z-0 rounded-full"></div>
                            
                            <!-- 流程步骤 -->
                            <div class="relative z-10 grid grid-cols-2 lg:grid-cols-4 gap-6">
                                <!-- 交底书撰写 -->
                                <div class="flex flex-col items-center group">
                                    <a href="${dynamicProgress.disclosure.file}" target="_blank" class="w-20 h-20 rounded-2xl flex items-center justify-center mb-4 transition-all duration-300 hover:scale-105 ${
                                        dynamicProgress.disclosure.status === 'completed' ? 'bg-green-50 border-2 border-green-200' :
                                        dynamicProgress.disclosure.status === 'in-progress' ? 'bg-blue-50 border-2 border-blue-200' :
                                        'bg-gray-50 border-2 border-gray-200 opacity-60'
                                    }">
                                        <svg class="w-7 h-7 ${
                                            dynamicProgress.disclosure.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.disclosure.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                    </a>
                                    <a href="${dynamicProgress.disclosure.file}" target="_blank" class="text-sm text-center mb-3 text-gray-700 group-hover:text-gray-900 transition-colors">交底书撰写</a>
                                    ${
                                        dynamicProgress.disclosure.status === 'completed' ?
                                        `<a href="${dynamicProgress.disclosure.file}" target="_blank" class="text-xs text-green-600 hover:text-green-700 bg-green-50 px-3 py-1.5 rounded-lg border border-green-200 hover:bg-green-100 transition-all">查看</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200 opacity-70">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 交底书查新 -->
                                <div class="flex flex-col items-center group">
                                    <a href="${dynamicProgress.novelty.file}" target="_blank" class="w-20 h-20 rounded-2xl flex items-center justify-center mb-4 transition-all duration-300 hover:scale-105 ${
                                        dynamicProgress.novelty.status === 'completed' ? 'bg-green-50 border-2 border-green-200' :
                                        dynamicProgress.novelty.status === 'in-progress' ? 'bg-blue-50 border-2 border-blue-200' :
                                        'bg-gray-50 border-2 border-gray-200 opacity-60'
                                    }">
                                        <svg class="w-7 h-7 ${
                                            dynamicProgress.novelty.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.novelty.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                        </svg>
                                    </a>
                                    <a href="${dynamicProgress.novelty.file}" target="_blank" class="text-sm text-center mb-3 text-gray-700 group-hover:text-gray-900 transition-colors">交底书查新</a>
                                    ${
                                        dynamicProgress.novelty.status === 'completed' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-green-600 hover:text-green-700 bg-green-50 px-3 py-1.5 rounded-lg border border-green-200 hover:bg-green-100 transition-all">查看</a>` :
                                        dynamicProgress.novelty.status === 'in-progress' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 transition-all">进行中</a>` :
                                        dynamicProgress.novelty.status === 'pending' && dynamicProgress.disclosure.status === 'completed' ?
                                        `<a href="${dynamicProgress.novelty.file}" target="_blank" class="text-xs text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 transition-all">去查新</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200 opacity-70">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 申请书撰写 -->
                                <div class="flex flex-col items-center group">
                                    <a href="${dynamicProgress.application.file}" target="_blank" class="w-20 h-20 rounded-2xl flex items-center justify-center mb-4 transition-all duration-300 hover:scale-105 ${
                                        dynamicProgress.application.status === 'completed' ? 'bg-green-50 border-2 border-green-200' :
                                        dynamicProgress.application.status === 'in-progress' ? 'bg-blue-50 border-2 border-blue-200' :
                                        'bg-gray-50 border-2 border-gray-200 opacity-60'
                                    }">
                                        <svg class="w-7 h-7 ${
                                            dynamicProgress.application.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.application.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                    </a>
                                    <a href="${dynamicProgress.application.file}" target="_blank" class="text-sm text-center mb-3 text-gray-700 group-hover:text-gray-900 transition-colors">申请书撰写</a>
                                    ${
                                        dynamicProgress.application.status === 'completed' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-green-600 hover:text-green-700 bg-green-50 px-3 py-1.5 rounded-lg border border-green-200 hover:bg-green-100 transition-all">查看</a>` :
                                        dynamicProgress.application.status === 'in-progress' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 transition-all">去撰写</a>` :
                                        dynamicProgress.application.status === 'pending' && dynamicProgress.novelty.status === 'completed' ?
                                        `<a href="${dynamicProgress.application.file}" target="_blank" class="text-xs text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 transition-all">去撰写</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200 opacity-70">未开始</span>`
                                    }
                                </div>
                                
                                <!-- 专利预评估 -->
                                <div class="flex flex-col items-center group">
                                    <a href="${dynamicProgress.evaluation.file}" target="_blank" class="w-20 h-20 rounded-2xl flex items-center justify-center mb-4 transition-all duration-300 hover:scale-105 ${
                                        dynamicProgress.evaluation.status === 'completed' ? 'bg-green-50 border-2 border-green-200' :
                                        dynamicProgress.evaluation.status === 'in-progress' ? 'bg-blue-50 border-2 border-blue-200' :
                                        'bg-gray-50 border-2 border-gray-200 opacity-60'
                                    }">
                                        <svg class="w-7 h-7 ${
                                            dynamicProgress.evaluation.status === 'completed' ? 'text-green-600' :
                                            dynamicProgress.evaluation.status === 'in-progress' ? 'text-blue-600' :
                                            'text-gray-400'
                                        }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </a>
                                    <a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-sm text-center mb-3 text-gray-700 group-hover:text-gray-900 transition-colors">专利预评估</a>
                                    ${
                                        dynamicProgress.evaluation.status === 'completed' ?
                                        `<a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-xs text-green-600 hover:text-green-700 bg-green-50 px-3 py-1.5 rounded-lg border border-green-200 hover:bg-green-100 transition-all">查看</a>` :
                                        dynamicProgress.application.status === 'completed'?
                                        `<a href="${dynamicProgress.evaluation.file}" target="_blank" class="text-xs text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 transition-all">去评估</a>` :
                                        `<span class="text-xs text-gray-400 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200 opacity-70">未开始</span>`
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('caseDetail').innerHTML = detailHtml;
        }

        // 默认选择第一个案件
        document.addEventListener('DOMContentLoaded', function() {
            selectCase('case4');
        });
    </script>
</body>
</html>